<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>听力练习</title>
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/popup.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
	<script src="js/config.js"></script>
	<script src="js/jquery-1.8.1.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/component.js?v=78"></script>
	<script src="js/navbar-component.js?v=2"></script>
	<script src="js/vue/vue-router.js"></script>
	<script src="js/srt.js?v=7"></script>
</head>

<body>
	<div id="app" v-cloak>
		<nav-top-bar :golink="backLink" linktitle="听力练习"></nav-top-bar>
		<div class="video">
			<video v-on:timeupdate="timeupdate" v-on:canplay="canplay" x5-playsinline="" playsinline=""
				x-webkit-airplay="allow" style="object-fit:fill" id="video" controls preload="auto" width="100%"
				:src="videoUrl">
			</video>
		</div>

		<!-- <div class="zhuanti-video">
			<img src="img/index/icon_bofang.png" class="bofang-icon" />
		</div> -->
		<div class="kouyulianxi-wrapper">
			<div class="kouyulianxi-box1">
				<div style="height:300px;overflow:scroll;" id="container">
					<div v-if="wordShow" v-for="(item,index) in content" :id="'id'+index"
						style="text-align: center;margin-bottom:5px;">
						<div class="kouyu-ying"
							v-bind:style="index == now?'color:red;text-align: center;':'text-align: center;'">
							<span v-for="ii in item.en">
								{{ii}}
							</span>
						</div>

						<div v-if="false" class="kouyu-zhong"
							v-bind:style="index == now?'color:red;text-align: center;':'text-align: center;'">
							听力练习 可能是不需要中文的
						</div>
					</div>
				</div>

				<div class="shangyiju-btn" @click="switchSentenceToNext(-1)">
					<img src="img/index/up.png" />
				</div>
				<div class="xiayiju-btn" @click="switchSentenceToNext(1)">
					<img src="img/index/down.png" />
				</div>
			</div>
		</div>
		<div class="footbox">
			<div class="footer tllx-foot">
				<ul>
					<li>
						<a href="javascript:;" @click="switchSpeedOp">
							<span class="yusu">{{speed}}X</span>
							<p>语速</p>
						</a>
					</li>
					<li>
						<a href="javascript:;" @click="switchCircle">
							<img src="img/tinglixuexi/icon_tingli_xunhuan.png" />
							<p>{{isCircle?'顺序播放':'单句循环'}}</p>
						</a>
					</li>
					<li>
						<a href="javascript:;" @click="switchWordShow">
							<img src="img/more/icon_ship_qiehuan.png" />
							<p>{{wordShow?'隐藏字幕':'查看字幕'}}</p>
						</a>
					</li>
				</ul>
			</div>
		</div>

		<!-- 语速设置 -->
		<div class="tongxuefasheng" v-if="speedOpShow">
			<div class="pop-mask" @click="speedOpShow=false"></div>
			<div class="tongxuefasheng-cont">
				<div class="touxuefasheng-top">
					语速设置
					<img src="img/index/icon_quxiao.png" class="quxiao-icon" @click="switchSpeedOp" />
				</div>
				<ul class="zimushezhi-cells">
					<li class="zimushezhi-cell" :class="{on:0.5==speed}" @click="videoSpeed(0.5)">0.5X</li>
					<li class="zimushezhi-cell" :class="{on:0.75==speed}" @click="videoSpeed(0.75)">0.75X</li>
					<li class="zimushezhi-cell" :class="{on:1==speed}" @click="videoSpeed(1)">1X</li>
					<li class="zimushezhi-cell" :class="{on:1.25==speed}" @click="videoSpeed(1.25)">1.25X</li>
					<li class="zimushezhi-cell" :class="{on:1.5==speed}" @click="videoSpeed(1.5)">1.5X</li>
					<li class="zimushezhi-cell" :class="{on:2==speed}" @click="videoSpeed(2)">2X</li>
					<li class="zimushezhi-cell" :class="{on:3==speed}" @click="videoSpeed(3)">3X</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script>
	let router = new VueRouter({
		mode: 'history'
	})

	var vue = new Vue({
		el: "#app",
		router,
		data() {
			return {
				id: 0,

				sentenceLink: {},
				sentenceLinkFlip: {},

				videoUrl: '',
				coverUrl: '',
				video: {},
				videoInstance: {},
				wordContainer: {},
				content: {},
				now: 0,

				speedOpShow: false,
				speed: 1,

				wordShow: true,

				isCircle: false,//是否循环播放
				begin: 0, //循环的起始和结束
				end: 0,

				backLink: '',
			}
		},
		created() {
			this.id = this.$route.query.id;
			this.backLink = '/shipinxuexi.html?id=' + this.id;
			this.getVideoInfo();

		},
		methods: {
			getVideoInfo() {
				axios.post('/mp/video/videoInfo', { id: this.id }).then(res => {
					this.videoUrl = res.data.PlayInfoList['PlayInfo'][0]['PlayURL'];
					this.vttUrl = res.data.subtitle_src
					this.coverUrl = res.data.VideoBase['CoverURL'];
					this.video = res.data.video

					axios.get("/mp/video/getWordScreen", { params: { id: this.id } }).then(res => {
						this.content = res.data

						let tmp = 0;
						for (let key in this.content) {
							this.sentenceLink[tmp] = parseInt(key) //一开始就转 一次性解决
							this.sentenceLinkFlip[key] = parseInt(tmp)
							this.content[key]['en'] = this.content[key]['en'].split(/[\s,\.;]+/)
							this.content[key]['exact'] = parseFloat(this.content[key]['start_millisecond'])
							tmp = key
						}
					})

				})
			},
			canplay() {
				this.videoInstance = document.getElementById("video");
				this.wordContainer = document.getElementById("container");
			},
			timeupdate() {
				if (this.payCircle()) {
					return true
				}
				if (!this.wordShow) {
					return
				}
				let now = Math.floor(this.videoInstance.currentTime);
				if (this.content[now] && this.videoInstance.currentTime > now + this.content[now]['exact']) {
					this.now = now
					this.updateScrollPosition()
				}
			},
			switchSentenceToNext(next) {
				this.now = next > 0 ? this.sentenceLink[this.now] : this.sentenceLinkFlip[this.now];
				this.updateCircleData()
				this.updateScrollPosition()
				this.videoInstance.currentTime = this.now + this.content[this.sentenceLink[this.now]]['exact']
			},
			switchSpeedOp() {
				this.speedOpShow = !this.speedOpShow
			},
			videoSpeed(speed) {
				this.videoInstance.playbackRate = speed
				this.speed = speed
			},
			switchWordShow() {
				this.wordShow = !this.wordShow
				if (this.wordShow) {
					this.videoInstance = document.getElementById("video");
					this.wordContainer = document.getElementById("container");
				}
			},
			switchCircle() {
				this.isCircle = !this.isCircle
				this.updateCircleData()
				this.updateScrollPosition()
			},
			updateCircleData() {
				//更新下循环播放需要用到的数据
				this.begin = this.now + this.content[this.now]['exact']
				this.end = this.sentenceLink[this.now]
				this.end = this.content[this.end]['exact'] + this.end
			},
			updateScrollPosition() {
				if (this.wordShow) {
					let top = document.getElementById("id" + this.now).offsetTop
					this.wordContainer.scrollTop = (top - 150)
				}
			},
			payCircle() {
				if (this.isCircle) {
					if (this.videoInstance.currentTime >= this.end) {
						this.videoInstance.currentTime = this.begin
					}
					return true
				}
				return false
			}
		}
	})
</script>

</html>